<template>
  <div class="el-track-container" v-if="iconVisible">
    <img class="el-track-icon" :src="icon.url" :style="iconStyle" />
  </div>
</template>
<script>
import registerMixin from '../mixins/register-component';

export default {
  name: 'el-bmap-track',
  mixins: [registerMixin],
  props: {
    icon: {
      type: Object,
      default() {
        return {
          url: '',
          size: [58, 58]
        };
      }
    },
    onlyView: {
      type: Boolean,
      default: true
    },
    position: {
      required: true,
      type: Array
    },
    offset: {
      type: Array
    },
    heading: {
      type: Number,
      default: -1
    },
    tilt: {
      type: Number,
      default: -1
    },
    zoom: {
      type: Number,
      default: 19
    },
    autoStart: {
      type: Boolean,
      default: false
    },
    events: {
      type: Object
    }

  },
  data() {
    const _this = this;
    return {
      mapSize: {
        width: 0,
        height: 0
      },
      offsetSize: {
        x: 0,
        y: 0
      },
      iconVisible: false,
      pixelLngLatScale: {
        x: 1,
        y: 1
      },
      preParentDomStyle: {
        overflow: '',
        height: '',
        width: ''
      },
      converters: {
        position(value) {
          return value;
        }
      },
      handlers: {
        position(newValue) {
          if (_this && _this.iconVisible && this.isLoaded()) {
            let p = new BMapGL.Point(newValue[0], newValue[1]);
            let options = {
              noAnimation: true
            };
            this.setCenter(p, options);
          }
        },
        offset() {

        },
        heading(newHeading) {
          if (_this && _this.iconVisible && this.isLoaded()) {
            this.setHeading(360 - newHeading, {
              noAnimation: true
            });
          }
        },
        tilt(newTilt) {
          if (_this && _this.iconVisible && this.isLoaded()) {
            this.setTilt(newTilt, {
              noAnimation: true
            });
          }
        },
        zoom(newZoom) {
          if (_this && _this.iconVisible && this.isLoaded()) {
            this.setZoom(newZoom, {
              noAnimation: true
            });
          }
        },
        onlyView(flag) {
          if (flag) {
            this.disableDragging();
            this.disableScrollWheelZoom();
            this.disableContinuousZoom();
            this.disableDoubleClickZoom();
            this.disableKeyboard();
            this.disablePinchToZoom();
          } else {
            this.enableDragging();
            this.enableScrollWheelZoom();
            this.enableContinuousZoom();
            this.enableDoubleClickZoom();
            this.enableKeyboard();
            this.enablePinchToZoom();
          }
        }
      }
    };
  },
  computed: {
    iconStyle() {
      let style = {};
      style.width = this.icon.size[0] + 'px';
      style.height = this.icon.size[1] + 'px';
      if (this.offset && this.offset.length > 0) {
        style.left = (this.mapSize.width / 2 + this.offset[0]) + 'px';
        style.top = (this.mapSize.height / 2 + this.offset[1]) + 'px';
      } else {
        style.left = (this.mapSize.width / 4 * 2) + 'px';
        style.top = (this.mapSize.height / 4 * 3) + 'px';
      }
      return style;
    }
  },
  created() {
  },
  methods: {
    __initComponent(options) {
      let map = options.map;
      this.mapSize = map.getContainerSize();
      if (this.offset && this.offset.length > 0) {
        this.offsetSize = {
          x: this.offset[0],
          y: this.offset[1]
        };
      } else {
        this.offsetSize = {
          x: this.mapSize.width / 4,
          y: this.mapSize.height / 4
        };
      }
      this.map = map;
      this.$bmapComponent = map;
      if (options.autoStart) {
        this.start();
      }
    },

    start() {
      let map = this.map;
      let container = map.getContainer();
      let parent = container.parentNode;
      this.preParentDomStyle.overflow = parent.style.overflow;
      this.preParentDomStyle.width = parent.style.width;
      this.preParentDomStyle.height = parent.style.height;
      parent.style.overflow = 'hidden';
      parent.style.width = this.mapSize.width + 'px';
      parent.style.height = this.mapSize.height + 'px';
      let offset = this.offset || [0, this.mapSize.height / 4];
      container.style.width = (this.mapSize.width + offset[0] * 2) + 'px';
      container.style.height = (this.mapSize.height + offset[1] * 2) + 'px';
      map.resize();
      let tilt = this.tilt;
      if (tilt > -1) {
        map.setTilt(tilt, {
          noAnimation: true
        });
      }
      let heading = this.heading;
      if (heading === -1) {
        map.setHeading(360 - heading, {
          noAnimation: true
        });
      }
      map.setZoom(this.zoom, {
        noAnimation: true
      });
      map.setCenter(new BMapGL.Point(this.position[0], this.position[1]), {
        noAnimation: true
      });
      if (this.onlyView) {
        map.disableDragging();
        map.disableScrollWheelZoom();
        map.disableContinuousZoom();
        map.disableDoubleClickZoom();
        map.disableKeyboard();
        map.disablePinchToZoom();
      }
      this.iconVisible = true;
    },

    stop() {
      this.iconVisible = false;
      let map = this.map;
      let container = map.getContainer();
      let parent = container.parentNode;
      parent.style.overflow = this.preParentDomStyle.overflow;
      parent.style.width = this.preParentDomStyle.width;
      parent.style.height = this.preParentDomStyle.height;
      container.style.width = '100%';
      container.style.height = '100%';
      map.resize();
      if (this.onlyView) {
        map.enableDragging();
        map.enableScrollWheelZoom();
        map.enableContinuousZoom();
        map.enableDoubleClickZoom();
        map.enableKeyboard();
        map.enablePinchToZoom();
      }
    }
  },
  render() {
    return null;
  },
  beforeDestroy() {
    this.stop();
    this.map = null;
    this.$bmapComponent = null;
  },
  destroyed() {
  }
};
</script>
<style lang="less" scoped>
  .el-track-container{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;

    .el-track-icon{
      position: absolute;
      z-index: 11;
      transform: translate(-50%, -50%);
    }
  }
</style>
